<template>
  <div class="custom-animate-box">
    <!-- 左侧动画区域 -->
    <div class="frame-page-box">
      <div class="frame-body">
        <div class="frame-content">
          <AnimateComponent />
        </div>
      </div>
    </div>
    <!-- 右侧属性配置区域 -->
    <RightAttribute />
  </div>
</template>

<script setup lang="ts">
import AnimateComponent from "./animateContent/index.vue";
import RightAttribute from "./rightAttribute/RightAttribute.vue";
</script>

<style>
@import './styles/index.css';
</style>
<style scoped>

.custom-animate-box {
  width: 100%;
  min-height: 100%;
  display: flex;
}
.frame-page-box {
  background-color: #1c1b29;
  flex: 1;
  min-width: 0;
  position: relative;
  
}
.select-type-box {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px;
  background-color: antiquewhite;
}
.frame-body {
  display: flex;
  justify-content: center;
  /* overflow: auto; */
  width: 100%;
  /* background-color: #4b42c6; */
}
.frame-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width:1000px) {
    .custom-animate-box{
        flex-direction: column;
    }
}
</style>
